<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS selectors</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="element-selectors">
      <h1>Hello World!</h1>
      <p>This is a paragraph.</p>

      <ul>
        <li>This is</li>
        <li>A list</li>
      </ul>
    </div>

    <hr>

    <div id="class-selectors">
      <p class="base-box warning">My first paragraph.</p>
      <p class="">My second paragraph.</p>
      <p class="">My third paragraph</p>
    </div>

    <hr>

    <div id="id-selectors">
      <p id="first"><strong>Winner</strong>: Velma Victory</p>
      <p id="second"><strong>2nd</strong>: Colin Contender</p>
      <p id="third"><strong>3rd</strong>: Phoebe Player</p>
    </div>   

    <hr>

    <div id="attribute-selectors">
      <ol>
        <li lang="en-GB" data-perf="inc-pro">Manchester United</li>
        <li lang="es" data-perf="same-pro">Barcelona</li>
        <li lang="de" data-perf="dec">Bayern Munich</li>

        <li lang="es" data-perf="same">Real Madrid</li>
        <li lang="de" data-perf="inc-rel">Borussia Dortmund</li>
        <li lang="en-GB" data-perf="dec-rel">Southampton FC</li>
      </ol>
    </div>

    <hr>

    <div id="pseudo-class-selectors">
      <ul>
        <li><a href="#">United Kingdom</a></li>
        <li><a href="#">Germany</a></li>
        <li><a href="#">Finland</a></li>
        <li><a href="#">Russia</a></li>
        <li><a href="#">Spain</a></li>
        <li><a href="#">Poland</a></li>
      </ul>
    </div>

    <hr>

    <div id="pseudo-element-selectors">
      <p>This is my very important paragraph. I am a distinguished gentleman of such renown that my paragraph needs to be styled in a manner befitting my majesty. Bow before my splendour, dear students, and go forth and learn CSS!</p>
    </div>

    <hr>

    <div id="combinators"> 

      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
      </ul>

      <h1>Welcome to my website</h1>

      <p>Hello, and welcome! I hope you enjoy your time here.</p>

      <h2>My philosophy</h2>

      <p>I am a believer in chilling out, and not getting grumpy. I think everyone else should follow this ideal, and <a href="#">drink green tea</a>.</p>
    
    </div>   
  </body>
</html> 